<template>
  <div class="rr-inner">
    <div class="rr-title">{{title}}</div>
    <!--拖拽部分-->
    <div class="drag-main layui-clear">
      <ul class="drag-answer">
        <li class="answer-item" v-for="(answer, index) in userAnswerList" :key="index" :class="{'active': getUseAnswer(answer)}">
          <span class="answer-num">第{{index + 1}}段</span>
          <div class="answer-text">
            <div class="answer-info" @drop.prevent="handleDrop(index, $event)" @click="handleSectionClick(index)" @dragover.prevent>
              <template v-if="answer">
                {{ getUseAnswer(answer).flag }} ) {{ getUseAnswer(answer).content }}
              </template>
            </div>
          </div>
        </li>
      </ul>
      <ul class="drag-option">
        <li class="drag-item" v-for="choose in chooseList" v-if="!choose.used" :key="choose.id">
          <div class="drag-info" draggable="true" @dragend="handleDragend" @dragstart="handleDragstart(choose, $event)">{{choose.flag}}) {{choose.content}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tuozhuai",
    componentType: 'question',
    props: {
      id: [Number, String],
      title: String,
      question: Object
    },
    data () {
      return {
        userAnswer: '',
        dragingItem: null,
        userAnswerList: []
      };
    },
    //新增更新question
    watch: {
      'question' (val) {
        if (val && val.user_is_answer) {
          this.userAnswerList = val.user_answer;
          val.answer_list.forEach(item => {
            item.used = this.userAnswerList.indexOf(item.id) > -1
          });
        }
      }
    },
    computed: {
      chooseList () {
        return this.question ? this.question.answer_list : [];
      },
      sectionList () {
        let sectionList = this.question ? this.question.section_list : [];
        return sectionList;
      }
    },
    mounted () {
      if (this.question) {
        if (this.question.user_is_answer) {
          this.userAnswerList = this.question.user_answer;
          this.question.answer_list.forEach(item => {
            item.used = this.userAnswerList.indexOf(item.id) > -1
          });
        } else {
          let questionNum = this.question.question_num;
          this.userAnswerList = new Array(questionNum);
        }
      }
      // if (this.question && this.question.user_is_answer) {
      //   let answerList = this.question.user_answer;
      //
      //   answerList.forEach(userAnswer => {
      //     this.question.answer_list.forEach(answer => {
      //       if (userAnswer.flag === answer.flag) {
      //         answer.sectionId = userAnswer.sectionId;
      //         answer.used = true;
      //         this.answerList.push(answer);
      //       }
      //     });
      //   });
      // }
    },
    methods: {
      getUseAnswer (item) {

        let answerList = this.question.answer_list;

        for (let i = 0; i < answerList.length; i++) {
          if (item == answerList[i].id) {
            return answerList[i];
          }
        }
        return null;
      },
      //点击左侧取消选择
      handleSectionClick (index) {
        if (this.userAnswerList[index]) {
          let answerId = this.userAnswerList[index];
          let answerList = this.question.answer_list;
          this.userAnswerList.splice(index, 1, null);
          answerList.forEach(item => {
            if (item.id == answerId) {
              item.used = false
            };
          });
        }
      },
      //被拖拽元素被放置在目标元素上
      handleDrop (index, e) {
        if (this.dragingItem && !this.userAnswerList[index]) {
          this.dragingItem.used = true;
          this.userAnswerList.splice(index, 1, this.dragingItem.id);
        }
      },
      handleDragstart (item, e) {
        e.dataTransfer.setData("itemText", e.target.innerHTML);
        this.dragingItem = item;
      },
      handleDragend (e) {
        this.dragingItem = null;
      },
      checkUserAnswer () {
        for (let i = 0; i < this.userAnswerList.length; i ++) {
          if (!this.userAnswerList[i])  {
            return true;
          }
        }
        return false;
      },
      //获取答题信息
      getQuestionAnswer () {
        let answer = {};
        answer.question_type = this.question.question_type;
        answer.id = this.question.id;
        answer.answer = this.userAnswerList;
        return answer;
      },
      // 提交的答题信息
      getAnswer () {
        let obj = {};
        obj.id = this.question.id;
        obj.question_type = this.question.question_type;
        obj.answer = this.userAnswerList;
        return obj;
      }
    }
  }
</script>

<style scoped>

</style>
